<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /* 解构赋值 快速地从复杂结构中提取我要的内容 */

      /* 简单对象的解构 数据准备 */
      //   const obj = {
      //     name: "Jack",
      //     age: 18,
      //     gender: "男",
      //   };

      /* 普通的逐级提取 */
      // let name = obj.name
      // console.log(name)

      // let age = obj.age
      // console.log(age)

      // let gender = obj.gender
      // console.log(gender)

      /* 解构赋值 */
      //   let { age,name } = obj;
      //   console.log(age,name);

      /* 一次性解构出多个变量 */
      //   let { name, age, gender, sex } = obj;
      //   console.log(name, age, gender, sex);

      /* 多级结构的对象 */
      const obj = {
        name: "Jack",
        age: "18",
        info: {
          id: 110108,
          clazz: 2204,
        },
        info2: {
          id: 110109,
          clazz: 2205,
        },
      };
      //   let {name,age,info,info2} = obj
      //   console.log(name,age,info,info2);

      /* 解构出不同层级的key-value */
      //   let {
      //     info,
      //     info: { id, clazz },
      //   } = obj;
      //   console.log("解构出一级key-value", info);
      //   console.log("解构出二级key-value", id, clazz);

      /* 解构的时候不想沿用原来的Key的名字 */
      //   将obj.name解构为myName变量
      let { name: myName,info:myInfo } = obj;
      console.log(myName);//obj.name
      console.log(myInfo);//obj.info

      let {
        info: { id, clazz },
        info2: { id: id2, clazz: clazz2 },
      } = obj;
      console.log(id, clazz); //info.id info.clazz
      console.log(id2, clazz2); //info2.id info2.clazz
    </script>
  </body>
</html>
